import type { PropType } from 'vue'
import {
    baseProps,
    makeBooleanProp,
    makeNumberProp,
    makeStringProp,
} from '../common/props'

export const rateProps = {
    ...baseProps,

    /**
     * 评分最大值
     * 类型: number
     * 默认值: 5
     */
    num: makeNumberProp(5),

    /**
     * 当前分数，使用v-model进行双向绑定
     * 类型: string | number | null
     * 默认值: null
     */
    modelValue: {
        type: [String, Number, null] as PropType<string | number | null>,
        default: null,
    },

    /**
     * 是否只读
     * 类型: boolean
     * 默认值: false
     */
    readonly: makeBooleanProp(false),

    /**
     * 图标大小
     * 类型: string
     * 默认值: '16px'
     */
    size: makeStringProp('16px'),

    /**
     * 图标间距
     * 类型: string
     * 默认值: '4px'
     */
    space: makeStringProp('4px'),

    /**
     * 未选中的图标颜色
     * 类型: string
     * 默认值: '#E8E8E8'
     */
    color: makeStringProp('#E8E8E8'),

    /**
     * 选中的图标颜色，支持传颜色数组（用于分段颜色）
     * 类型: string | Array<string>
     * 默认值: 'linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)'
     */
    activeColor: {
        type: [String, Array] as PropType<string | Array<string>>,
        default:
            'linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)',
    },

    /**
     * 未选中的图标类名
     * 类型: string
     * 默认值: 'star-on'
     */
    icon: makeStringProp('star-on'),

    /**
     * 选中的图标类名
     * 类型: string
     * 默认值: 'star-on'
     */
    activeIcon: makeStringProp('star-on'),

    /**
     * 是否禁用
     * 类型: boolean
     * 默认值: false
     */
    disabled: makeBooleanProp(false),

    /**
     * 禁用的图标颜色
     * 类型: string
     * 默认值: 'linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%)'
     */
    disabledColor: makeStringProp(
        'linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%)',
    ),

    /**
     * 是否允许半选
     * 类型: boolean
     * 默认值: false
     */
    allowHalf: makeBooleanProp(false),
}
